<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background-color: #f5f5f5;
  }
  .prod {
    width: 298px;
    height: 415px;
    background-color: #fff;
    /* 居中 */
    margin: 100px auto;
  }
  .prod img {
    width: 100%;
    /* 图片平铺 */
    object-fit: cover;
    height: 240px;
  }
  .prod a {
    text-decoration: none;
    color: #000;
  }
  /* 评论 box */
  .review {
    color: #000;
    font-size: 14px;
    /* 没有width属性，不会撑大盒子 */
    padding: 0 20px;
    /* 设置margin-top，就不用计算 padding 了 */
    margin-top: 20px;
    height: 50px;
  }
  /* 回复人数元素 */
  .appraise {
    font-size: 12px;
    color: #b0b0b0;
    padding: 0 20px; /* 不设置上下边距：难以计算高度 */
    height: 18px; /* 设置高度 + 上边距，用来计算高度 */
    margin-top: 20px;
  }
  .info {
    padding: 0 20px;
    height: 30px;
    margin-top: 5px;
  }
  .info h4 {
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    color: #000;
  }
  .info em {
    font-style: normal;
    margin: 0 7px 0 15px;
    color: lightgrey;
  }
  .info span {
    color: orange;
  }
</style>
<body>
  <div class="prod">
    <a href="#"><img src="images/phone.png" alt="" /></a>
    <p class="review">
      <a href="#">快递牛，整体不错蓝牙递牛，整体不错。红米给力</a>
    </p>
    <div class="appraise">来自 117384232 人的评价</div>
    <div class="info">
      <h4><a href="#">Redmi Rots真无线蓝牙...</a></h4>
      <em>|</em>
      <span>99.9元</span>
    </div>
  </div>
</body>
